<!--
 * @FileDescription 视窗页
 * @Author lz
 * @Date 20230606 16:56:58
 * @LastEditors lz
 * @LastEditTime 20230606 16:56:58
-->
<template>
  <div class="wp">
    <hdr></hdr>
    <a-tooltip placement="bottom" v-if="HomeContent.Default.BDT.value == '0'">
      <template #title>
        <span>返回</span>
      </template>
      <rollback-outlined :style="{ color: '#FFF' }" class="ico_roll" @click="roll" />
    </a-tooltip>
    <a-tooltip placement="bottom">
      <template #title>
        <span>电子白板</span>
      </template>
      <edit-outlined class="edit" @click="whiteboard()" />
    </a-tooltip>
    <a-tooltip placement="bottom" v-if="HomeContent.Default.SubBut.value">
      <template #title>
        <span>提交</span>
      </template>
      <UploadOutlined
        :class="HomeContent.Default.BDT.value == '0' ? 'submitTo' : 'submitToRoll'"
        @click="sub"
      />
      <!-- <UploadOutlined class="submitToRoll" @click="sub" /> -->
    </a-tooltip>
    <FloMenu
      v-if="
        HomeContent.Default.MenuData.value.Id &&
        HomeContent.Default.ViewType.value == true
      "
    ></FloMenu>
    <div
      class="masking-out"
      v-if="HomeContent.Default.MenuData.value.Id"
      @click="maskingOut"
    ></div>
    <Multimeter v-if="HomeContent.Default.MulType.value"></Multimeter>
    <Insulation v-if="HomeContent.Default.insulationType.value"></Insulation>
    <GroundResistance
      v-if="HomeContent.Default.GroundResistanceType.value"
    ></GroundResistance>

    <AngView v-show="HomeContent.Default.ViewType.value == true"></AngView>

    <!-- <module v-if="HomeContent.Default.ModuleShow.value"> </module> -->
    <Attachment2 v-if="HomeContent.Default.ModuleShow.value"></Attachment2>
    <div
      class="MultimeterStorage"
      @click="Storage"
      v-if="HomeContent.Default.ViewType.value == false"
    >
      放回
    </div>
    <Operations v-else></Operations>
    <Diagnos v-if="HomeContent.Default.DiagnosShow.value"></Diagnos>
    <Trobies v-if="HomeContent.Default.TrobiesShow.value"></Trobies>
    <Service v-if="HomeContent.Default.ServiceShow.value"></Service>
    <toolbar v-if="HomeContent.Default.ViewType.value"></toolbar>
    <currentStep
      v-if="
        HomeContent.Default.ViewType.value && HomeContent.Default.typeIndex.value == 1
      "
    ></currentStep>
    <!-- <Evaluate></Evaluate> -->
    <TerminalInformation v-if="HomeContent.Default.TiType.value"></TerminalInformation>
    <div
      class="to_top"
      v-if="
        HomeContent.Default.tip.value == true &&
        HomeContent.Default.MouseLabel.value != ''
      "
    >
      {{ HomeContent.Default.MouseLabel.value }}
    </div>
    <div v-if="HomeContent.Default.ViewType.value == true">
      <div
        class="PerspectiveControl"
        @click="view_map"
        v-if="HomeContent.Default.WindowViewType.value"
      >
        <img src="/public/images/整车线束导航-点击.png" class="ic_map" />
        <p>整车线束导航</p>
      </div>
      <div class="PerspectiveControl" @click="view_map" v-else>
        <img src="/public/images/整车线束导航.png" class="ic_map" />
        <p>整车线束导航</p>
      </div>
      <div class="flashlight" @click="controlFlashlight" v-if="Flashlight">
        <img src="/public/images/ic_flashlight_select@3x.png" class="ic_map" />
        <p>关闭手电筒</p>
      </div>
      <div class="flashlight" @click="controlFlashlight" v-else>
        <img src="/public/images/ic_flashlight_normal@3x.png" class="ic_map" />
        <p>打开手电筒</p>
      </div>
      <div class="roam" @click="controlRoam" v-if="HomeContent.Default.roam.value">
        <img src="/public/images/ic_roaming_select@3x.png" class="ic_map" />
        <p>关闭漫游</p>
      </div>
      <div class="roam" @click="controlRoam" v-else>
        <img src="/public/images/ic_roaming_normal@3x.png" class="ic_map" />
        <p>开启漫游</p>
      </div>
    </div>
    <root-board v-if="whiteboardTypes == true" />
    <!-- ========================= 穿戴部分 头========================= -->
    <div class="maintain" v-if="HomeContent.Default.ViewType.value == true">
      <div class="showWear" @click="showWear">
        <!-- 绝缘手套 -->
        <img
          src="/images/穿戴-wearDevice/pic_右手套.png"
          class="isWearSmallLeft"
          v-show="HomeContent.Default.isWearOk.value"
        />
        <img
          src="/images/穿戴-wearDevice/pic_左手套.png"
          class="isWearSmallRight"
          v-if="HomeContent.Default.isWearOk.value"
        />
        <!-- 安全帽 -->
        <img
          src="/images/穿戴-wearDevice/pic_安全帽1.png"
          class="isWearSmallHelmet"
          v-if="HomeContent.Default.isWearHelmetOk.value"
        />
        <!-- 棉手套 -->
        <img
          src="/images/穿戴-wearDevice/Pic_左手套2.png"
          class="isWearSmallGlove2Left"
          v-if="HomeContent.Default.isWearGlove2Ok.value"
        />
        <img
          src="/images/穿戴-wearDevice/Pic_右手套2.png"
          class="isWearSmallGlove2Right"
          v-if="HomeContent.Default.isWearGlove2Ok.value"
        />
        <!-- 靴子 -->
        <img
          src="/images/穿戴-wearDevice/pic_左鞋.png"
          class="isWearSmallShoeLeft"
          v-if="HomeContent.Default.isWearShoeOk.value"
        />
        <img
          src="/images/穿戴-wearDevice/pic_右鞋.png"
          class="isWearSmallShoeRight"
          v-if="HomeContent.Default.isWearShoeOk.value"
        />
        <!-- 护目镜 -->
        <img
          src="/images/穿戴-wearDevice/pic_护目镜1.png"
          class="isWearSmallGogglesOk"
          v-if="HomeContent.Default.isWearGogglesOk.value"
        />
        <!-- 防酸碱手套 -->
        <img
          src="/images/穿戴-wearDevice/Pic_左手套3.png"
          class="isWearGlove3SmallLeft"
          v-if="HomeContent.Default.isWearGlove3Ok.value"
        />
        <img
          src="/images/穿戴-wearDevice/Pic_右手套3.png"
          class="isWearGlove3SmallRight"
          v-if="HomeContent.Default.isWearGlove3Ok.value"
        />
      </div>
      <span class="text">维修人员</span>
    </div>
    <div class="Dia_wp" v-show="wearPop">
      <div class="wearPop">
        <h2 class="title">防护装备穿戴</h2>
        <!-- 绝缘手套 -->
        <img
          src="/images/穿戴-wearDevice/pic_右手套.png"
          class="isWearLeft"
          v-if="HomeContent.Default.isWearOk.value"
        />
        <img
          src="/images/穿戴-wearDevice/pic_左手套.png"
          class="isWearRight"
          v-if="HomeContent.Default.isWearOk.value"
        />
        <img
          ref="floatGlove1"
          src="/images/穿戴-wearDevice/pic_手套1.png"
          draggable="true"
          class="glove1"
          :style="{
            transform: `translate(${elementPosition1.x}px, ${elementPosition1.y}px)`,
          }"
        />
        <!-- 安全帽 -->
        <img
          src="/images/穿戴-wearDevice/pic_安全帽1.png"
          class="isWearHelmet"
          v-if="HomeContent.Default.isWearHelmetOk.value"
        />
        <img
          ref="floatHelmet"
          src="/images/穿戴-wearDevice/pic_安全帽.png"
          v-drag.offset.clamp
          drag-trigger
          class="helmet"
          :style="{
            transform: `translate(${elementPosition2.x}px, ${elementPosition2.y}px)`,
          }"
        />
        <!-- 棉手套 -->
        <img
          src="/images/穿戴-wearDevice/Pic_左手套2@2x.png"
          class="isWearGlove2Left"
          v-if="HomeContent.Default.isWearGlove2Ok.value"
        />
        <img
          src="/images/穿戴-wearDevice/Pic_右手套2@2x.png"
          class="isWearGlove2Right"
          v-if="HomeContent.Default.isWearGlove2Ok.value"
        />
        <img
          ref="floatGlove2"
          src="/images/穿戴-wearDevice/pic_手套2.png"
          v-drag.offset.clamp
          drag-trigger
          class="glove2"
          :style="{
            transform: `translate(${elementPosition3.x}px, ${elementPosition3.y}px)`,
          }"
        />
        <!-- 鞋子 -->
        <img
          src="/images/穿戴-wearDevice/pic_左鞋.png"
          class="isWearShoeLeft"
          v-if="HomeContent.Default.isWearShoeOk.value"
        />
        <img
          src="/images/穿戴-wearDevice/pic_右鞋.png"
          class="isWearShoeRight"
          v-if="HomeContent.Default.isWearShoeOk.value"
        />
        <img
          ref="floatShoe"
          src="/images/穿戴-wearDevice/pic_防护鞋.png"
          v-drag.offset.clamp
          drag-trigger
          class="shoe"
          :style="{
            transform: `translate(${elementPosition4.x}px, ${elementPosition4.y}px)`,
          }"
        />
        <!-- 护目镜 -->
        <img
          src="/images/穿戴-wearDevice/pic_护目镜1.png"
          class="isWearGogglesOk"
          v-if="HomeContent.Default.isWearGogglesOk.value"
        />
        <img
          ref="floatGoggles"
          src="/images/穿戴-wearDevice/pic_护目镜.png"
          v-drag.offset.clamp
          drag-trigger
          class="goggles"
          :style="{
            transform: `translate(${elementPosition5.x}px, ${elementPosition5.y}px)`,
          }"
        />
        <!-- 防酸碱手套 -->
        <img
          src="/images/穿戴-wearDevice/Pic_左手套3@2x.png"
          class="isWearGlove3Left"
          v-if="HomeContent.Default.isWearGlove3Ok.value"
        />
        <img
          src="/images/穿戴-wearDevice/Pic_右手套3@2x.png"
          class="isWearGlove3Right"
          v-if="HomeContent.Default.isWearGlove3Ok.value"
        />
        <img
          ref="floatCorrosionGlove"
          src="/images/穿戴-wearDevice/pic_耐酸腐手套.png"
          v-drag.offset.clamp
          drag-trigger
          class="corrosionGlove"
          :style="{
            transform: `translate(${elementPosition6.x}px, ${elementPosition6.y}px)`,
          }"
        />
        <span class="close" @click="closeWearPop">×</span>
        <div class="circle1"></div>
        <span class="head">头部</span>
        <div class="circle2" ref="circle_hand"></div>
        <span class="hand">手部</span>
        <div class="circle3"></div>
        <span class="eyes">眼部</span>
        <div class="circle4"></div>
        <span class="foot">脚部</span>
        <div class="proplePic">
          <img
            src="/images/穿戴-wearDevice/pic_右手.png"
            style="position: absolute; top: 207px; left: 33px"
          />
          <img
            src="/images/穿戴-wearDevice/pic_左手.png"
            style="position: absolute; top: 207px; right: 32px"
          />
        </div>
        <span class="tip">请使用鼠标左键拖动需要穿戴的防护装备到对应的部位</span>
        <div class="toolbar">
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="HomeContent.Default.isWearOk.value"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_手套2-2.png"
                style="position: absolute; bottom: 42px; left: 48px"
                v-if="HomeContent.Default.isWearOk.value"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="HomeContent.Default.isWearHelmetOk.value"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_安全帽2.png"
                style="position: absolute; bottom: 42px; left: 248px"
                v-if="HomeContent.Default.isWearHelmetOk.value"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="HomeContent.Default.isWearGlove2Ok.value"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_手套2-1.png"
                style="position: absolute; bottom: 42px; left: 448px"
                v-if="HomeContent.Default.isWearGlove2Ok.value"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="HomeContent.Default.isWearShoeOk.value"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_防护鞋2.png"
                style="position: absolute; bottom: 42px; left: 648px"
                v-if="HomeContent.Default.isWearShoeOk.value"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="HomeContent.Default.isWearGogglesOk.value"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_护目镜2.png"
                style="position: absolute; bottom: 42px; left: 846px"
                v-if="HomeContent.Default.isWearGogglesOk.value"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- ========================= 穿戴部分 尾========================== -->
  </div>
  <!-- <module
    v-if="HomeContent.Default.ModuleShow.value && HomeContent.Default.WOT.value == false"
  >
  </module> -->
  <!-- <moduleSub v-if="HomeContent.Default.ModuleShow.value && HomeContent.Default.WOT.value">
  </moduleSub> -->
  <Ultimate v-if="HomeContent.Default.EvaluateShow.value"></Ultimate>
  <messageBox
    ref="messageBoxRef"
    :Questions="'上传成功，点击确认退出软件'"
    :messageType="0"
  ></messageBox>
  <div class="BoxTip" v-if="HomeContent.Default.popTypes.value">
    <img
      v-if="HomeContent.Default.sysPromptRes.value"
      src="/public/images/ic_Successful.png"
      class="ic_Successful"
    />
    <img v-else src="/public/images/ic_error(1).png" class="ic_Successful" />
    <div class="TipTxt">
      {{ HomeContent.Default.messageCodeResult }}
    </div>
    <div class="TipBtn" @click="TipCol">确定</div>
  </div>
</template>

<script setup lang="ts">
import hdr from "../Hdr/index.vue";
import { onMounted, ref, nextTick, reactive, onUnmounted } from "vue";
import { EditOutlined, RollbackOutlined, UploadOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import FloMenu from "../FloatingMenu/index.vue";
import TerminalInformation from "../TerminalInformation/index.vue";
import Multimeter from "../Multimeter/index.vue";
import Insulation from "../Insulation/index.vue";
import GroundResistance from "../GroundResistance/index.vue";
import AngView from "../AngleofView/index.vue";
import module from "../WorkOrder/index.vue";
import moduleSub from "../WorkOrderSub/index.vue";
import Attachment2 from "../Attachment2/index.vue";
import Evaluate from "../Evaluate/index.vue";
import Ultimate from "../Ultimate/index.vue";
import Diagnos from "../DiagnosticInstrument/index.vue";
import Service from "../ServiceManual/index.vue";
import toolbar from "../toolbar/index.vue";
import currentStep from "../currentStep/index.vue";
import Trobies from "../Troubleshooting/index.vue";
import Operations from "../Operations/index.vue";
import RootBoard from "../elecboard/RootBoard.vue";
import messageBox from "../messageBox.vue";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
import statComponen from "../StateCode";
import ObjectControllerCode from "../ObjectControllerCode";
import { valueEquals } from "element-plus";
HomeContent.Default.isLoading.value = true;
let whiteboardTypes = ref(false);
let MouseLabelX = ref("0%");
let MouseLabelY = ref("0%");
let newXY: any = {};
let refNum = ref(0);
let ViewType = ref(false);
// ===========================
// HomeContent.Default.isWearOk.value = ref(false);
// const HomeContent.Default.isWearHelmetOk.value = ref(false);
// const HomeContent.Default.isWearShoeOk.value = ref(false);
// const HomeContent.Default.isWearGogglesOk = ref(false);
// const HomeContent.Default.isWearGlove2Ok = ref(false);
// const HomeContent.Default.isWearGlove3Ok = ref(false);

const wearPop = ref(false);
async function showWear() {
  wearPop.value = !wearPop.value;
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_GET_WEAR_INFO
    )
  );
  console.log("穿戴信息", JSON.parse(newArr.Content).Result);
  HomeContent.Default.wearInfo.value = JSON.parse(newArr.Content).Result;

  // 根据信息改穿戴
  HomeContent.Default.wearInfo.value.forEach((element: { Id: any; IsWear: any }) => {
    if (element.Id == 6 && element.IsWear) {
      // 绝缘手套
      elementPosition1.x = 275;
      elementPosition1.y = -294;
      HomeContent.Default.isWearOk.value = true;
    } else if (element.Id == 6 && element.IsWear == false) {
      elementPosition1.x = originalPosition1.x;
      elementPosition1.y = originalPosition1.y;
      HomeContent.Default.isWearOk.value = false;
    } else if (element.Id == 5 && element.IsWear) {
      // 护目镜
      elementPosition5.x = -55;
      elementPosition5.y = -531;
      HomeContent.Default.isWearGogglesOk.value = true;
    } else if (element.Id == 5 && element.IsWear == false) {
      elementPosition5.x = originalPosition5.x;
      elementPosition5.y = originalPosition5.y;
      HomeContent.Default.isWearGogglesOk.value = false;
    } else if (element.Id == 4 && element.IsWear) {
      // 绝缘鞋
      elementPosition4.x = 145;
      elementPosition4.y = -295;
      HomeContent.Default.isWearShoeOk.value = true;
    } else if (element.Id == 4 && element.IsWear == false) {
      elementPosition4.x = originalPosition4.x;
      elementPosition4.y = originalPosition4.y;
      HomeContent.Default.isWearShoeOk.value = false;
    } else if (element.Id == 3 && element.IsWear) {
      // 防酸碱手套
      elementPosition6.x = -724;
      elementPosition6.y = -294;
      HomeContent.Default.isWearGlove3Ok.value = true;
    } else if (element.Id == 3 && element.IsWear == false) {
      elementPosition6.x = originalPosition6.x;
      elementPosition6.y = originalPosition6.y;
      HomeContent.Default.isWearGlove2Ok.value = false;
    } else if (element.Id == 2 && element.IsWear) {
      // 安全帽
      elementPosition2.x = 76;
      elementPosition2.y = -531;
      HomeContent.Default.isWearHelmetOk.value = true;
    } else if (element.Id == 2 && element.IsWear == false) {
      elementPosition2.x = originalPosition2.x;
      elementPosition2.y = originalPosition2.y;
      HomeContent.Default.isWearHelmetOk.value = false;
    } else if (element.Id == 1 && element.IsWear) {
      // 棉手套
      elementPosition3.x = -124;
      elementPosition3.y = -294;
      HomeContent.Default.isWearGlove2Ok.value = true;
    } else if (element.Id == 1 && element.IsWear == false) {
      elementPosition3.x = originalPosition3.x;
      elementPosition3.y = originalPosition3.y;
      HomeContent.Default.isWearGlove3Ok.value = false;
    }
  });
}

const originalPosition = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset = reactive({
  x: 0,
  y: 0,
});
const elementPosition = reactive({
  x: 10,
  y: 10,
});
const originalPosition1 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset1 = reactive({
  x: 0,
  y: 0,
});
const elementPosition1 = reactive({
  x: 10,
  y: 10,
});
const originalPosition2 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset2 = reactive({
  x: 0,
  y: 0,
});
const elementPosition2 = reactive({
  x: 10,
  y: 10,
});
const originalPosition3 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset3 = reactive({
  x: 0,
  y: 0,
});
const elementPosition3 = reactive({
  x: 10,
  y: 10,
});
const originalPosition4 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset4 = reactive({
  x: 0,
  y: 0,
});
const elementPosition4 = reactive({
  x: 10,
  y: 10,
});
const originalPosition5 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset5 = reactive({
  x: 0,
  y: 0,
});
const elementPosition5 = reactive({
  x: 10,
  y: 10,
});
const originalPosition6 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset6 = reactive({
  x: 0,
  y: 0,
});
const elementPosition6 = reactive({
  x: 10,
  y: 10,
});
const restore = () => {
  elementPosition.x = originalPosition.x;
  elementPosition.y = originalPosition.y;
};
// ======================================================================
const IsWear = ref({
  type: 0,
  id: 0,
});
const UnWear = ref({
  type: 0,
  id: 0,
});
const circle_hand = ref<any>(null);
// 绝缘手套
const onMousedown1 = async (event: MouseEvent) => {
  IsWear.value.id = HomeContent.Default.wearInfo.value[5].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  IsWear.value.type = HomeContent.Default.wearInfo.value[5].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  UnWear.value.type = HomeContent.Default.wearInfo.value[5].Type;
  event.stopPropagation();
  // 鼠标按下的时候的x/y
  mousedownOffset1.x = event.clientX - originalPosition1.x;
  mousedownOffset1.y = event.clientY - originalPosition1.y;
  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    elementPosition1.x = originalPosition1.x;
    elementPosition1.y = originalPosition1.y;
    HomeContent.Default.isWearOk.value = false;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(UnWear.value)
      )
    );
  } else {
    document.addEventListener("mousemove", onMousemove1, true);
    document.addEventListener("mouseup", onMouseup1, true);
  }
};
const onMousemove1 = async (event: MouseEvent) => {
  event.stopPropagation();
  // 图片所在的x/y
  elementPosition1.x = event.clientX - mousedownOffset1.x;
  elementPosition1.y = event.clientY - mousedownOffset1.y;
};
const onMouseup1 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove1, true);
  document.removeEventListener("mouseup", onMouseup1, true);
  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    if (HomeContent.Default.isWearGlove2Ok.value) {
      elementPosition3.x = originalPosition3.x;
      elementPosition3.y = originalPosition3.y;
      HomeContent.Default.isWearGlove2Ok.value = false;
      UnWear.value.type = HomeContent.Default.wearInfo.value[0].Type;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(UnWear.value)
        )
      );
      elementPosition1.x = 275;
      elementPosition1.y = -294;
      HomeContent.Default.isWearOk.value = true;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    } else if (HomeContent.Default.isWearGlove3Ok.value) {
      // 如果已经有防酸碱手套了，先让防酸碱手套回去远点
      elementPosition6.x = originalPosition6.x;
      elementPosition6.y = originalPosition6.y;
      HomeContent.Default.isWearGlove3Ok.value = false;
      UnWear.value.type = HomeContent.Default.wearInfo.value[2].Type;
      // 发消息让防酸碱手套为false
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(UnWear.value)
        )
      );
      // 让绝缘手套在圆圈内
      elementPosition1.x = 275;
      elementPosition1.y = -294;
      HomeContent.Default.isWearOk.value = true;
      // 发消息让绝缘手套为true
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    } else {
      elementPosition1.x = 275;
      elementPosition1.y = -294;
      HomeContent.Default.isWearOk.value = true;
      // 在圈里发信息，如果type对应，就发个消息
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    }
  } else {
    elementPosition1.x = originalPosition1.x;
    elementPosition1.y = originalPosition1.y;
    HomeContent.Default.isWearOk.value = false;
  }
};
const onMousedown2 = async (event: MouseEvent) => {
  IsWear.value.id = HomeContent.Default.wearInfo.value[1].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  IsWear.value.type = HomeContent.Default.wearInfo.value[1].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  UnWear.value.type = HomeContent.Default.wearInfo.value[1].Type;
  event.stopPropagation();

  mousedownOffset2.x = event.clientX - originalPosition2.x;
  mousedownOffset2.y = event.clientY - originalPosition2.y;

  if (
    event.clientX > 671 &&
    event.clientX < 775 &&
    event.clientY > 250 &&
    event.clientY < 357
  ) {
    elementPosition2.x = originalPosition2.x;
    elementPosition2.y = originalPosition2.y;
    HomeContent.Default.isWearHelmetOk.value = false;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(UnWear.value)
      )
    );
  } else {
    document.addEventListener("mousemove", onMousemove2, true);
    document.addEventListener("mouseup", onMouseup2, true);
  }
};
const onMousemove2 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition2.x = event.clientX - mousedownOffset2.x;
  elementPosition2.y = event.clientY - mousedownOffset2.y;
};
const onMouseup2 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove2, true);
  document.removeEventListener("mouseup", onMouseup2, true);
  // 如果鼠标松开的位置在圈内并且圈内是否包含图片元素
  if (
    event.clientX > 671 &&
    event.clientX < 775 &&
    event.clientY > 250 &&
    event.clientY < 357
  ) {
    elementPosition2.x = 76;
    elementPosition2.y = -531;
    HomeContent.Default.isWearHelmetOk.value = true;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(IsWear.value)
      )
    );
  } else {
    elementPosition2.x = originalPosition2.x;
    elementPosition2.y = originalPosition2.y;
    HomeContent.Default.isWearHelmetOk.value = false;
  }
};
const onMousedown3 = async (event: MouseEvent) => {
  IsWear.value.id = HomeContent.Default.wearInfo.value[0].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  IsWear.value.type = HomeContent.Default.wearInfo.value[0].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  UnWear.value.type = HomeContent.Default.wearInfo.value[0].Type;
  event.stopPropagation();

  mousedownOffset3.x = event.clientX - originalPosition3.x;
  mousedownOffset3.y = event.clientY - originalPosition3.y;

  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    elementPosition3.x = originalPosition3.x;
    elementPosition3.y = originalPosition3.y;
    HomeContent.Default.isWearGlove2Ok.value = false;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(UnWear.value)
      )
    );
  } else {
    document.addEventListener("mousemove", onMousemove3, true);
    document.addEventListener("mouseup", onMouseup3, true);
  }
};
const onMousemove3 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition3.x = event.clientX - mousedownOffset3.x;
  elementPosition3.y = event.clientY - mousedownOffset3.y;
};
const onMouseup3 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove3, true);
  document.removeEventListener("mouseup", onMouseup3, true);

  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    if (HomeContent.Default.isWearOk.value) {
      elementPosition1.x = originalPosition1.x;
      elementPosition1.y = originalPosition1.y;
      HomeContent.Default.isWearOk.value = false;
      UnWear.value.type = HomeContent.Default.wearInfo.value[5].Type;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(UnWear.value)
        )
      );
      elementPosition3.x = -124;
      elementPosition3.y = -294;
      HomeContent.Default.isWearGlove2Ok.value = true;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    } else if (HomeContent.Default.isWearGlove3Ok.value) {
      elementPosition6.x = originalPosition6.x;
      elementPosition6.y = originalPosition6.y;
      HomeContent.Default.isWearGlove3Ok.value = false;
      UnWear.value.type = HomeContent.Default.wearInfo.value[2].Type;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(UnWear.value)
        )
      );
      elementPosition3.x = -124;
      elementPosition3.y = -294;
      HomeContent.Default.isWearGlove2Ok.value = true;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    } else {
      elementPosition3.x = -124;
      elementPosition3.y = -294;
      HomeContent.Default.isWearGlove2Ok.value = true;
      // 在圈里发信息，如果type对应，就发个消息
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    }
  } else {
    elementPosition3.x = originalPosition3.x;
    elementPosition3.y = originalPosition3.y;
    HomeContent.Default.isWearGlove2Ok.value = false;
  }
};
const onMousedown4 = async (event: MouseEvent) => {
  IsWear.value.id = HomeContent.Default.wearInfo.value[3].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  IsWear.value.type = HomeContent.Default.wearInfo.value[3].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  UnWear.value.type = HomeContent.Default.wearInfo.value[3].Type;
  event.stopPropagation();

  mousedownOffset4.x = event.clientX - originalPosition4.x;
  mousedownOffset4.y = event.clientY - originalPosition4.y;

  if (
    event.clientX > 1144 &&
    event.clientX < 1247 &&
    event.clientY > 487 &&
    event.clientY < 588
  ) {
    elementPosition4.x = originalPosition4.x;
    elementPosition4.y = originalPosition4.y;
    HomeContent.Default.isWearShoeOk.value = false;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(UnWear.value)
      )
    );
  } else {
    document.addEventListener("mousemove", onMousemove4, true);
    document.addEventListener("mouseup", onMouseup4, true);
  }
};
const onMousemove4 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition4.x = event.clientX - mousedownOffset4.x;
  elementPosition4.y = event.clientY - mousedownOffset4.y;
};
const onMouseup4 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove4, true);
  document.removeEventListener("mouseup", onMouseup4, true);
  if (
    event.clientX > 1144 &&
    event.clientX < 1247 &&
    event.clientY > 487 &&
    event.clientY < 588
  ) {
    elementPosition4.x = 145;
    elementPosition4.y = -295;
    HomeContent.Default.isWearShoeOk.value = true;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(IsWear.value)
      )
    );
  } else {
    elementPosition4.x = originalPosition4.x;
    elementPosition4.y = originalPosition4.y;
    HomeContent.Default.isWearShoeOk.value = false;
  }
};
const onMousedown5 = async (event: MouseEvent) => {
  IsWear.value.id = HomeContent.Default.wearInfo.value[4].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  IsWear.value.type = HomeContent.Default.wearInfo.value[4].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  UnWear.value.type = HomeContent.Default.wearInfo.value[4].Type;
  event.stopPropagation();

  mousedownOffset5.x = event.clientX - originalPosition5.x;
  mousedownOffset5.y = event.clientY - originalPosition5.y;

  if (
    event.clientX > 1143 &&
    event.clientX < 1246 &&
    event.clientY > 251 &&
    event.clientY < 351
  ) {
    elementPosition5.x = originalPosition5.x;
    elementPosition5.y = originalPosition5.y;
    HomeContent.Default.isWearGogglesOk.value = false;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(UnWear.value)
      )
    );
  } else {
    document.addEventListener("mousemove", onMousemove5, true);
    document.addEventListener("mouseup", onMouseup5, true);
  }
};
const onMousemove5 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition5.x = event.clientX - mousedownOffset5.x;
  elementPosition5.y = event.clientY - mousedownOffset5.y;
};
const onMouseup5 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove5, true);
  document.removeEventListener("mouseup", onMouseup5, true);
  if (
    event.clientX > 1143 &&
    event.clientX < 1246 &&
    event.clientY > 251 &&
    event.clientY < 351
  ) {
    elementPosition5.x = -55;
    elementPosition5.y = -531;
    HomeContent.Default.isWearGogglesOk.value = true;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(IsWear.value)
      )
    );
  } else {
    elementPosition5.x = originalPosition5.x;
    elementPosition5.y = originalPosition5.y;
    HomeContent.Default.isWearGogglesOk.value = false;
  }
};
const onMousedown6 = async (event: MouseEvent) => {
  IsWear.value.id = HomeContent.Default.wearInfo.value[2].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  IsWear.value.type = HomeContent.Default.wearInfo.value[2].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  UnWear.value.type = HomeContent.Default.wearInfo.value[2].Type;
  event.stopPropagation();

  mousedownOffset6.x = event.clientX - originalPosition6.x;
  mousedownOffset6.y = event.clientY - originalPosition6.y;

  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    elementPosition6.x = originalPosition6.x;
    elementPosition6.y = originalPosition6.y;
    HomeContent.Default.isWearGlove3Ok.value = false;
    await WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
        JSON.stringify(UnWear.value)
      )
    );
  } else {
    document.addEventListener("mousemove", onMousemove6, true);
    document.addEventListener("mouseup", onMouseup6, true);
  }
};
const onMousemove6 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition6.x = event.clientX - mousedownOffset6.x;
  elementPosition6.y = event.clientY - mousedownOffset6.y;
};
const onMouseup6 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove6, true);
  document.removeEventListener("mouseup", onMouseup6, true);
  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    if (HomeContent.Default.isWearOk.value) {
      elementPosition1.x = originalPosition1.x;
      elementPosition1.y = originalPosition1.y;
      HomeContent.Default.isWearOk.value = false;
      UnWear.value.type = HomeContent.Default.wearInfo.value[5].Type;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(UnWear.value)
        )
      );
      elementPosition6.x = -724;
      elementPosition6.y = -294;
      HomeContent.Default.isWearGlove3Ok.value = true;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    } else if (HomeContent.Default.isWearGlove2Ok.value) {
      elementPosition3.x = originalPosition3.x;
      elementPosition3.y = originalPosition3.y;
      HomeContent.Default.isWearGlove2Ok.value = false;
      UnWear.value.type = HomeContent.Default.wearInfo.value[0].Type;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(UnWear.value)
        )
      );
      elementPosition6.x = -724;
      elementPosition6.y = -294;
      HomeContent.Default.isWearGlove3Ok.value = true;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    } else {
      elementPosition6.x = -724;
      elementPosition6.y = -294;
      HomeContent.Default.isWearGlove3Ok.value = true;
      await WebSocketComponent.Default.PostMessage(
        new ClientMessage.DiagnosisAdapterMessage(
          MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
          JSON.stringify(IsWear.value)
        )
      );
    }
  } else {
    elementPosition6.x = originalPosition6.x;
    elementPosition6.y = originalPosition6.y;
    HomeContent.Default.isWearGlove3Ok.value = false;
  }
};

// ========================================
const floatGlove1 = ref<any>(null);
const floatHelmet = ref<any>(null);
const floatGlove2 = ref<any>(null);
const floatShoe = ref<any>(null);
const floatGoggles = ref<any>(null);
const floatCorrosionGlove = ref<any>(null);

onMounted(() => {
  restore();
  floatGlove1.value.addEventListener("mousedown", onMousedown1, true);
  floatHelmet.value.addEventListener("mousedown", onMousedown2, true);
  floatGlove2.value.addEventListener("mousedown", onMousedown3, true);
  floatShoe.value.addEventListener("mousedown", onMousedown4, true);
  floatGoggles.value.addEventListener("mousedown", onMousedown5, true);
  floatCorrosionGlove.value.addEventListener("mousedown", onMousedown6, true);
});

onUnmounted(() => {
  floatGlove1.value.removeEventListener("mousedown", onMousedown1, true);
  floatHelmet.value.removeEventListener("mousedown", onMousedown2, true);
  floatGlove2.value.removeEventListener("mousedown", onMousedown3, true);
  floatShoe.value.removeEventListener("mousedown", onMousedown4, true);
  floatGoggles.value.removeEventListener("mousedown", onMousedown5, true);
  floatCorrosionGlove.value.removeEventListener("mousedown", onMousedown6, true);
});

//  =================================================================================
function requestCoordinate() {
  newXY = JSON.parse(window.sessionStorage.getItem("Cursor")!);
  MouseLabelX.value = newXY.X * window.screen.width * 0.01 + 10 + "px";
  MouseLabelY.value = newXY.Y * window.screen.height * 0.01 + 10 + "px";
  refNum.value = requestAnimationFrame(requestCoordinate);
}
const router = useRouter();
const StatusConfigs = ref(
  new Map([
    //车辆控制
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_START, "OFF"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_PARKING, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears, "P"],

    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LOCK_CAR_WINDOW,
      "Activated",
    ],

    //舱盖锁
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_HOOD_SWITCH, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_TRUNK_SWITCH, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LOCK_CAR_DOOR, "Activated"],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_UNLOCK_CAR_DOOR,
      "Activated",
    ],
    [ObjectControllerCode.Default.MsgCodesList.TRUNK_CLOSE_SWITCH, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.TRUNK_MACHINERY_SWITCH, "Activated"],

    //后视镜
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REARVIEW_MIRROR_FOLD,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REARVIEW_MIRROR_HEATER,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList
        .APPEARENCE_UI_REARVIEW_MIRROR_ACTIVATE_LEFT,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList
        .APPEARENCE_UI_REARVIEW_MIRROR_ACTIVATE_OFF,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList
        .APPEARENCE_UI_REARVIEW_MIRROR_ACTIVATE_RIGHT,
      "Activated",
    ],
    //灯光开关
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_TURN_LEFT,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_TURN_RIGHT,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_NEAR,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_DISTANCE,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_FLASH,
      "Activated",
    ],

    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_AUTO, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_OFF, "Activated"],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_LAMPLET_SWITCH,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEADLAMP_SWITCH,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_FRONT_FOG,
      "Activated",
    ],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_REAR_FOG, "Activated"],
    //雨刮开关
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_ONCE,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_CLSOE,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_SPRAY,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_INTERVAL,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_LOW,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_HIGHT,
      "Activated",
    ],
    //遥控器
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REMOTEKEY_LOCK, "Activated"],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REMOTEKEY_UNLOCK,
      "Activated",
    ],
    // 空调控制
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_AIR_OUTLET_UP, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_AIR_OUTLET_MID, "Activated"],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_AIR_OUTLET_DOWN,
      "Activated",
    ],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_AIR_FORNT_GEAR, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_AIR_BACK_GEAR, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_AIR_AUTO, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_AIR_CLOSE, "Activated"],
    [ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_AIR_INNERLOOP, "Activated"],
    // 座椅控制
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_MAINSEATHEATING,
      "Activated",
    ],
    [
      ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_PASSENGERSEATHEATING,
      "Activated",
    ],
  ])
);
function MessageMethod(Arr: any) {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DISASSEMBLY_OBJECT_VEHICLE_CONTROLLER,
      JSON.stringify(Arr)
    )
  );
}
//返回
async function roll() {
  // 重置穿戴状态
  HomeContent.Default.isWearOk.value = false;
  HomeContent.Default.isWearHelmetOk.value = false;
  HomeContent.Default.isWearShoeOk.value = false;
  HomeContent.Default.isWearGogglesOk.value = false;
  HomeContent.Default.isWearGlove2Ok.value = false;
  HomeContent.Default.isWearGlove3Ok.value = false;
  // 清除正计时的计时器
  clearInterval(HomeContent.Default.timekeepingControl.value);
  HomeContent.Default.isLoading.value = false;
  HomeContent.Default.time.value = "00:00:00";
  // 取消显示对象菜单操作
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisDisplayUIMenuRequest(false)
  );
  HomeContent.Default.MenuData.value = {};
  // 重置独显
  HomeContent.Default.ViewType.value = true;
  // 重置加速踏板
  let newArr1 = {
    Id: ObjectControllerCode.Default.MsgCodesList.ACCELERATOR_PEDAL,
    Content: 0,
  };
  MessageMethod(newArr1);
  // 重置制动踏板
  let newArr2 = {
    Id: ObjectControllerCode.Default.MsgCodesList.BRAKE_PEDAL,
    Content: 0,
  };
  MessageMethod(newArr2);
  // 重置方向盘
  let newArr3 = {
    Id: ObjectControllerCode.Default.MsgCodesList.STEERING_WHEEL,
    Content: 0,
  };
  MessageMethod(newArr3);
  // 重置风量
  let newArr4 = {
    Id: ObjectControllerCode.Default.MsgCodesList.WIND_VELOCITY_CONTROLLER,
    Content: 0,
  };
  MessageMethod(newArr4);
  // 重置万用表UI
  HomeContent.Default.MulType.value = false;
  // 重置绝缘仪UI
  HomeContent.Default.insulationType.value = false;
  // 重置车辆控制状态
  // Map数组循环取值
  for (let i of StatusConfigs.value.entries()) {
    statComponen.Default.StatusConfigs.value.set(i[0], i[1]);
  }

  //系统重置
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.SYSTEM_RESET
    )
  );
  //存贮程序开始运行时间
  HomeContent.Default.StartTime.value = new Date();
  HomeContent.Default.EvaluateShow.value = false;
  HomeContent.Default.SubBut.value = true;

  HomeContent.Default.currentPoint.value = "0";
  //重置
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.SYSTEM_QUIT
    )
  );
  //卸载
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.EmbeddedApplicationShutdownRequest()
  );

  router.push("/");
}
//放回
async function Storage() {
  WebSocketComponent.Default.PostMessage(new ClientMessage.DiagnosisDisplayRequest());
  HomeContent.Default.ViewType.value = true; // 为true不显示
}
function maskingOut() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisDisplayUIMenuRequest(false)
  );
  HomeContent.Default.MenuData.value = {};
}
const messageBoxRef = ref<any>();

async function sub() {
  // HomeContent.Default.isHide.value = false;
  // 提交后关闭定时器，元素隐藏
  clearInterval(HomeContent.Default.timekeepingControl.value);
  HomeContent.Default.isLoading.value = false;
  // HomeContent.Default.time.value = "00:00:00";
  clearInterval(HomeContent.Default.timerControl.value);
  HomeContent.Default.timerControl.value = null;
  //获取评价数据
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.APPRAISE_SUBMIT,
      `${Math.trunc((+new Date() - HomeContent.Default.StartTime.value) / 1000)}`
    )
  );
  console.log("提交", JSON.parse(newArr.Content).Result);
  HomeContent.Default.Synthetical.value = JSON.parse(
    newArr.Content
  ).Result.Record.Synthetical;

  HomeContent.Default.FaultRepair.value = JSON.parse(
    newArr.Content
  ).Result.Record.FaultRepair;

  HomeContent.Default.AED.value = JSON.parse(newArr.Content).Result;
  HomeContent.Default.workOrderSheet.value = JSON.parse(
    newArr.Content
  ).Result.Record.WorkOrderSheet;
  console.log("11111111", HomeContent.Default.workOrderSheet.value);

  // 评分表
  HomeContent.Default.ratingForm.value =
    HomeContent.Default.AED.value.Record.RatingForm.RatingForm;

  // 工单
  // HomeContent.Default.PlayerReportData.value =
  //   HomeContent.Default.AED.value.Orders.Orders;
  // HomeContent.Default.workOrderSheet.value = HomeContent.Default.AED.value.Orders.Orders;

  if (HomeContent.Default.CacheFullData.value) {
    if (HomeContent.Default.CacheFullData.value.FaultPointCollection) {
      let license = JSON.parse(newArr.Content).Result;
      license.Id = HomeContent.Default.CacheFullData.value.ResultId;
      // license.Orders = JSON.stringify(license.Orders);
      license.Orders = HomeContent.Default.workOrderSheet.value;
      license.Record = JSON.stringify(license.Record);
      license.Tool = 0;
      license.Standard = 0;
      license.Process = 0;
      license.Security = 0;
      license.Efficiency = 0;
      license.Score = HomeContent.Default.AED.value.Score;
      license.Time = HomeContent.Default.AED.value.UsedTime;
      console.log("license", license);

      if (HomeContent.Default.CacheFullData.value.Mode == "4") {
        let response = await fetch(
          "http://virtual.eduhenghong.cn:4497/api/SkillsContest/SubmitResult",
          {
            method: "POST",
            body: JSON.stringify(license),
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${HomeContent.Default.CacheFullData.value.Token}`,
            },
          }
        );
      } else {
        let response = await fetch(
          "http://virtual.eduhenghong.cn:4497/api/TrainingResult/Submit",
          {
            method: "POST",
            body: JSON.stringify(license),
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${HomeContent.Default.CacheFullData.value.Token}`,
            },
          }
        );
      }
    }
  }
  if (HomeContent.Default.BDT.value == "0") {
    HomeContent.Default.EvaluateShow.value = true;
  } else {
    messageBoxRef.value.showModel();
  }
  HomeContent.Default.SubBut.value = false;
}
//电子白板
function whiteboard() {
  whiteboardTypes.value = !whiteboardTypes.value;
}
function TipCol() {
  HomeContent.Default.popTypes.value = false;
}
function view_map() {
  HomeContent.Default.WindowViewType.value = !HomeContent.Default.WindowViewType.value;
}
const Flashlight = ref(false);
async function controlFlashlight() {
  // 手电筒消息 + 切换
  Flashlight.value = !Flashlight.value;
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.FlashlightShowRequest(Flashlight.value)
  );
}
const roam = ref(false);
async function controlRoam() {
  // 漫游消息 + 切换
  HomeContent.Default.roam.value = !HomeContent.Default.roam.value;
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.RoamModeRequest(HomeContent.Default.roam.value)
  );
}
function closeWearPop() {
  wearPop.value = false;
}
onMounted(() => {
  refNum.value = requestAnimationFrame(requestCoordinate);
});
</script>

<style scoped>
.wp {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  color: #fff;
  background: transparent;
  overflow: hidden;
}

.maintain {
  width: 100px;
  height: 166px;
  position: absolute;
  left: 20px;
  bottom: 69px;
}

.showWear {
  left: 20px;
  width: 100px;
  height: 146px;
  background: rgba(34, 35, 39, 0.9);
  background-image: url("/images/穿戴-wearDevice/pic_人 默认状态.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65% 88%;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 0px solid;
  border-image: linear-gradient(180deg, rgba(206, 240, 114, 0.5), rgba(206, 240, 114, 0))
    0 0;
}

.text {
  font-size: 10px;
  margin-left: 29px;
}

.Dia_wp {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.1);
  position: relative;
}

.wearPop {
  width: 1440px;
  height: 884px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid;
  opacity: 1;
  position: absolute;
  margin-top: 45px;
  margin-left: 240px;
}

.title {
  position: absolute;
  top: 27px;
  left: 40px;
  font-size: 30px;
}

.close {
  font-size: 45px;
  position: absolute;
  color: #000;
  right: 40px;
}

h2 {
  font-weight: 550;
}

.circle1 {
  width: 104px;
  height: 104px;
  border-radius: 50px;
  opacity: 1;
  border: 1px solid #e9e9e9;
  position: absolute;
  left: 432px;
  top: 150px;
}

.circle2 {
  width: 104px;
  height: 104px;
  border-radius: 50px;
  opacity: 1;
  border: 1px solid #e9e9e9;
  position: absolute;
  left: 432px;
  top: 387px;
}

.circle3 {
  width: 104px;
  height: 104px;
  border-radius: 50px;
  opacity: 1;
  border: 1px solid #e9e9e9;
  position: absolute;
  right: 432px;
  top: 150px;
}

.circle4 {
  width: 104px;
  height: 104px;
  border-radius: 50px;
  opacity: 1;
  border: 1px solid #e9e9e9;
  position: absolute;
  right: 432px;
  top: 387px;
}

.head {
  color: #000;
  position: absolute;
  top: 265px;
  left: 472px;
}

.hand {
  color: #000;
  position: absolute;
  top: 500px;
  left: 472px;
}

.eyes {
  color: #000;
  position: absolute;
  top: 265px;
  right: 472px;
}

.foot {
  color: #000;
  position: absolute;
  top: 500px;
  right: 472px;
}

.proplePic {
  width: 230px;
  height: 480px;
  margin: 24px 56px 8px 56px;
  background-image: url("/images/穿戴-wearDevice/pic_人 默认状态.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 102px;
  left: 560px;
}

.toolbar {
  height: 200px;
  border-radius: 24px 24px 24px 24px;
  opacity: 1;
  border: 1px solid #f0f0f0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 40px;
  display: flex;
}

.tip {
  position: absolute;
  top: 606px;
  left: 559px;
  font-size: 12px;
  color: #000;
  margin: 10px 0 0 29px;
}

.box1 {
  width: 152px;
  height: 152px;
  margin: 24px;
}

.box2 {
  width: 104px;
  height: 104px;
  background: #f8f8f8;
  opacity: 1;
  margin: 24px;
  border-radius: 50%;
}

.MultimeterStorage {
  width: 200px;
  position: absolute;
  left: 50%;
  bottom: 10%;
  height: 60px;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  color: #000;
}

.gongdan {
  font-size: 50px;
  color: #000;
}

.masking-out {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.01);
}

.submitTo {
  color: rgb(255, 255, 255) !important;
  font-size: 24px;
  position: absolute;
  top: 1.5vh;
  right: 170px;
}

.submitToRoll {
  color: rgb(255, 255, 255) !important;
  font-size: 24px;
  position: absolute;
  top: 1.5vh;
  right: 120px;
}

.edit {
  color: rgb(255, 255, 255) !important;
  font-size: 24px;
  position: absolute;
  top: 1.5vh;
  right: 70px;
}

.ico_roll {
  font-size: 24px;
  position: absolute;
  right: 120px;
  top: 1.5vh;
}

.to_top {
  font-size: 20px;
  text-align: center;
  position: absolute;
  color: #fff;
  left: v-bind(MouseLabelX);
  top: v-bind(MouseLabelY);
  padding: 5px 10px;
  background: rgba(13, 20, 59, 0.36);
  border: 1px solid rgba(53, 196, 255, 0.34);
}

.PerspectiveControl {
  color: #fff;
  position: absolute;
  bottom: 10px;
  text-align: center;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.01);
}

.flashlight {
  color: #fff;
  position: absolute;
  bottom: 10px;
  text-align: center;
  right: 103px;
  margin-right: 25px;
  background-color: rgba(0, 0, 0, 0.01);
}

.roam {
  color: #fff;
  position: absolute;
  bottom: 10px;
  text-align: center;
  right: 200px;
  margin-right: 39px;
  background-color: rgba(0, 0, 0, 0.01);
}

.ic_map {
  width: 40px;
  margin-bottom: 10px;
}

.ViewTypes {
  display: none !important;
}

.BoxTip {
  width: 360px;
  height: 294px;
  border-radius: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.ic_Successful {
  width: 128px;
  margin-top: 20px;
  margin-left: 116px;
}
.TipTxt {
  font-size: 16px;
  font-weight: 400;
  color: #202020;
  position: absolute;
  left: 51%;
  transform: translate(-50%);
  top: 57%;
}

.TipBtn {
  width: 112px;
  height: 48px;
  color: black;
  border-radius: 6px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
  transform: translate(-50%, 0);
  border: 1px solid #e9e9e9;
}

.TipBtn:hover {
  background-color: #9bfb4e;
}

.glove1 {
  position: absolute;
  left: 157px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.isWearLeft {
  position: absolute;
  top: 311px;
  left: 632px;
  z-index: 1;
}

.isWearSmallLeft {
  position: absolute;
  left: 22px;
  top: 58px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.isWearRight {
  position: absolute;
  top: 311px;
  left: 778px;
  z-index: 1;
}

.isWearSmallRight {
  position: absolute;
  left: 65px;
  top: 57px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.isWearGlove2Left {
  position: absolute;
  z-index: 1;
  top: 324px;
  left: 774px;
  object-fit: contain;
  width: 50px;
}

.isWearSmallGlove2Left {
  position: absolute;
  left: 63px;
  top: 59px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.isWearGlove2Right {
  position: absolute;
  z-index: 1;
  top: 324px;
  left: 640px;
  object-fit: contain;
  width: 50px;
}

.isWearSmallGlove2Right {
  position: absolute;
  left: 24px;
  top: 60px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.isWearGlove3Left {
  position: absolute;
  z-index: 1;
  top: 309px;
  left: 770px;
  object-fit: contain;
  width: 82px;
}

.isWearGlove3SmallLeft {
  position: absolute;
  left: 62px;
  top: 59px;
  z-index: 1;
  object-fit: contain;
  width: 20px;
}

.isWearGlove3Right {
  position: absolute;
  z-index: 1;
  top: 309px;
  left: 612px;
  object-fit: contain;
  width: 82px;
}

.isWearGlove3SmallRight {
  position: absolute;
  left: 20px;
  top: 60px;
  z-index: 1;
  object-fit: contain;
  width: 20px;
}

.isWearHelmet {
  position: absolute;
  top: 137px;
  left: 700px;
  z-index: 2;
}

.isWearSmallHelmet {
  position: absolute;
  left: 41.4px;
  top: 10.16px;
  z-index: 2;
  object-fit: contain;
  width: 20px;
}

.isWearShoeLeft {
  position: absolute;
  top: 532px;
  left: 734px;
  z-index: 1;
}

.isWearSmallShoeLeft {
  position: absolute;
  left: 51px;
  bottom: 32px;
  z-index: 1;
  object-fit: contain;
  width: 18px;
}

.isWearShoeRight {
  position: absolute;
  top: 532px;
  left: 669px;
  z-index: 1;
}

.isWearSmallShoeRight {
  position: absolute;
  left: 33px;
  bottom: 32px;
  z-index: 1;
  object-fit: contain;
  width: 18px;
}

.isWearGogglesOk {
  position: absolute;
  top: 176px;
  left: 709px;
  z-index: 1;
}

.isWearSmallGogglesOk {
  position: absolute;
  left: 44px;
  top: 22px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.helmet {
  position: absolute;
  left: 357px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.glove2 {
  position: absolute;
  left: 557px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.shoe {
  position: absolute;
  left: 757px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.goggles {
  position: absolute;
  left: 957px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.corrosionGlove {
  position: absolute;
  left: 1157px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
</style>
